/**
 * Created by maiseries on 2018/1/10.
 */
import React from 'react';
import {
    StyleSheet,
    View,
    Text,
    Image,
    TouchableOpacity
} from 'react-native';

import {DemandState} from '../config/dict/DemandState'

export default class DemandListItemView extends React.Component {

    static propTypes = {
        style: React.PropTypes.number,
        item: React.PropTypes.object,
        onPress: React.PropTypes.func
    }

    static defaultProps = {
    }

    render() {
        return (
            <TouchableOpacity activeOpacity={layout.TOUCH_OPACITY_ACTIVE} onPress={()=>this.props.onPress?this.props.onPress():{}}>
                <View style={[base.columnCC, styles.container, this.props.style]}>
                    <View style={[base.rowCC, styles.titleBox]}>
                        <Text allowFontScaling={false} style={styles.title}>{format.subStr(this.props.item.asset_name)}</Text>
                        <Text allowFontScaling={false} style={styles.state}>{DemandState[this.props.item.audit_state]}</Text>
                        <Image style={styles.icon} source={require('../sources/icon_global_go.png')} resizeMode={'contain'}/>
                    </View>
                    <View style={styles.contentBox}>
                        <View style={[base.rowCC, styles.row]}>
                            <View style={[base.rowCC, styles.item]}>
                                <Text allowFontScaling={false} style={styles.key}>资产类型</Text>
                                <Text allowFontScaling={false} style={styles.value}>{this.props.item.asset_type}</Text>
                            </View>
                            <View style={[base.rowCC, styles.item]}>
                                <Text allowFontScaling={false} style={styles.key}>期望成本</Text>
                                <Text allowFontScaling={false} style={styles.value}>{format.money(this.props.item.capital_interest_rate)} %</Text>
                            </View>
                        </View>
                        <View style={[base.rowCC, styles.row]}>
                            <View style={[base.rowCC, styles.item]}>
                                <Text allowFontScaling={false} style={styles.key}>所属行业</Text>
                                <Text allowFontScaling={false} style={styles.value}>{this.props.item.industry_name}</Text>
                            </View>
                            <View style={[base.rowCC, styles.item]}>
                                <Text allowFontScaling={false} style={styles.key}>用款金额</Text>
                                <Text allowFontScaling={false} style={[styles.value, {
                                    color: layout.MAIN_COLOR
                                }]}>{format.money(this.props.item.capital_amount)} 万元</Text>
                            </View>
                        </View>
                        <View style={[base.rowCC, styles.row]}>
                            <View style={[base.rowCC, styles.item]}>
                                <Text allowFontScaling={false} style={styles.key}>用款期限</Text>
                                <Text allowFontScaling={false} style={styles.value}>{this.props.item.capital_term} 个月</Text>
                            </View>
                            <View style={[base.rowCC, styles.item]}>
                                <Text allowFontScaling={false} style={styles.key}>提交时间</Text>
                                <Text allowFontScaling={false} style={styles.value}>{format.date(this.props.item.create_date)}</Text>
                            </View>
                        </View>
                    </View>
                </View>
            </TouchableOpacity>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        paddingHorizontal: layout.GAP_HORIZONTAL_MID,
        overflow: 'hidden',
        backgroundColor: '#fff'
    },
    titleBox: {
        alignSelf: 'stretch',
        paddingHorizontal: layout.GAP_HORIZONTAL_LARGE,
        paddingVertical: layout.height(24),
        borderBottomWidth: layout.LINE_WIDTH * 2,
        borderBottomColor: layout.MAIN_BORDER_COLOR
    },
    title: {
        flex: 1,
        fontSize: layout.font(28),
        color: layout.FORM_FONT_COLOR
    },
    state: {
        marginLeft: layout.GAP_HORIZONTAL_MID,
        fontSize: layout.font(28),
        color: layout.MAIN_COLOR
    },
    icon: {
        marginLeft: layout.GAP_HORIZONTAL_MID,
        width: layout.width(20),
        height: layout.height(20)
    },
    contentBox: {
        alignSelf: 'stretch',
        paddingTop: layout.height(30),
    },
    row: {
        alignSelf: 'stretch',
        paddingBottom: layout.height(40)
    },
    item: {
        flex: 1,
        justifyContent: 'flex-start',
        paddingLeft: layout.GAP_HORIZONTAL_LARGE,
    },
    key: {
        paddingRight: layout.GAP_HORIZONTAL_MID,
        fontSize: layout.font(24),
        color: layout.MAIN_AUX_COLOR
    },
    value: {
        fontSize: layout.font(24),
        color: layout.FORM_FONT_COLOR
    },
})